{% extends "_layouts/examples.html" %}
{% block title %}Truncate text{% endblock %}

{% block content %}
  <table aria-label="Table example demonstrating how to use Vanilla's truncation utility">
    <thead>
      <tr>
        <th>FQDN</th>
        <th>Status</th>
        <th class="u-align--right">RAM</th>
        <th class="u-align--right">Disks</th>
        <th class="u-align--right">Storage</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td class="u-truncate">NameLongEnoughToCauseOverflowAndRevealAnEllipsis</td>
        <td class="u-truncate">Failed to enter rescue mode</td>
        <td class="u-align--right">2 GiB</td>
        <td class="u-align--right">1</td>
        <td class="u-align--right">2TB</td>
      </tr>
      <tr>
          <td>
            <span>This sentence will wrap on multiple lines without truncating, while the following one will truncate once it reaches the end of the line.</span>
            <span class="u-truncate">
              This one will truncate when it reaches the end of the line
            </span>
          </td>
          <td>This text will not get truncated.</td>
          <td class="u-align--right">2 GiB</td>
          <td class="u-align--right">1</td>
          <td class="u-align--right">2TB</td>
        </tr>
    </tbody>
  </table>
  <p class="u-truncate">This sentence will truncate and reveal an ellipsis once it exceeds the paragraph's max-width.</p>

  <label class="p-checkbox u-truncate" style="width: 20rem;">
    <input type="checkbox" class="p-checkbox__input">
    <span class="p-checkbox__label">This label will truncate at the end of the col</span>
  </label>

{% endblock %}
